import React, { PureComponent } from 'react'
import {Text, View, StyleSheet} from 'react-native'
import { DatePickerView, Button } from 'antd-mobile'
import moment from 'moment'
import PropTypes from 'prop-types'
import {RangeDatePicker, TextButton} from '../../widgets'
import color from '../../utils/color'
import screen from '../../utils/screen'
import {createAction, NavigationActions} from '../../utils'


export default class extends PureComponent {
  static propTypes = {
    changeDate: PropTypes.any,
    initTime: PropTypes.any,
  }
  constructor(props) {
    super(props)
    const { initTime } = this.props
    this.state = {
      showRangeTimer: false,
      timeViewText: "~",
      timeStart: new Date(),
      timeEnd: new Date(),
    }
  }

  componentDidMount() {
    const { initTime } = this.props
    console.log('initTime is ', initTime)
    this.renderTimeStyle(initTime.startTime, initTime.startTime)
  }

  toggleShowRange = () => {
    let showRangeTimer = this.state.showRangeTimer
    this.setState({
      showRangeTimer : !showRangeTimer
    })
  }

  closeShowRange = () => {
    this.setState({
      showRangeTimer: false
    })
  }

  renderTimeStyle = (first, end) => {
    let timeViewText = ''
    // if(first === end) {
    // timeViewText = first
    // } else {
    if(first == end) {
      timeViewText = first
    } else {
      timeViewText = first + '~' + end
    }
    this.setState({
      timeStart: moment(first, 'YYYY').toDate(),
      timeEnd: moment(end, 'YYYY').toDate(),
      timeViewText: timeViewText
    }, () => {
      this.props.changeDate && this.props.changeDate(first, end)
    })
  }

  invokeSubmit = (v) => {
    this.setState({showRangeTimer: false})
    this.renderTimeStyle(moment(this.state.timeStart).format("YYYY"), moment(this.state.timeStart).add(4, 'year').format("YYYY"))
  }

  render() {
    const { extra } = this.props;
    const { showRangeTimer, timeViewText , timeStart, timeEnd} = this.state
    console.log('extra is ', extra)
    return (
      <View>
        <View style={styles.topTab}>
          <View style={styles.topTabLeft}>
            <TextButton
              onPress={this.toggleShowRange}
              style={styles.topTabLeftFont}
              title="起始年度"
            />
            <Text style={styles.topTabExtraFont}>{extra}</Text>
          </View>
          <View style={styles.topTabRight}>
            <Text style={styles.topTabRightFont}>{timeViewText}</Text>
          </View>
        </View>
        {
          this.state.showRangeTimer && (
            <View>
              <View style={{flexDirection: 'row'}}>
                <View style={{flex: 1}}>
                  <DatePickerView mode="year" value={this.state.timeStart} onChange={(v) => {this.setState({timeStart: v})}}/>
                </View>
              </View>
              <View style={{marginTop: 20}}>
                <Button onClick={this.invokeSubmit}>确定</Button>
              </View>
            </View>
          )
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  topTab: {
    backgroundColor: color.theme,
    height: screen.pxToDp(100),
    flexDirection: 'row',
    paddingHorizontal: screen.pxToDp(26),
  },
  topTabLeft: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-end',
    flex: 2,
  },
  topTabLeftFont: {
    fontSize: screen.pxToDp(39),
    color: '#FFFFFF',
  },
  topTabExtraFont: {
    fontSize: screen.pxToDp(20),
    color: '#FFFFFF',
    marginLeft: screen.pxToDp(8)
  },
  topTabLeftFontOpacity: {
    fontSize: screen.pxToDp(39),
    color: '#FFFFFF',
    opacity: 0.5,
  },
  topTabLeftSpace: {
    width: screen.pxToDp(30),
  },
  topTabRight: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    flex: 2
  },
  topTabRightFont: {
    fontSize: screen.pxToDp(30),
    color: '#FFFFFF',
  },
})
